<!-- src/views/LoginMethods.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">登录方式管理</CardTitle>
      </CardHeader>
      <CardContent>

        <div class="space-y-4 mt-5">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">账号密码登录</h3>
              <p class="text-sm text-gray-500">可使用用户名、手机号 + 密码登录</p>
            </div>
            <Switch v-model="passwordLogin" />
          </div>
          <Separator />
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">手机号登录</h3>
              <p class="text-sm text-gray-500">可使用机短信验证、手机号 + 密码登录</p>
            </div>
            <Switch v-model="phoneLogin" />
          </div>
          <Separator />
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">电子邮箱登录</h3>
              <p class="text-sm text-gray-500">可使电子邮箱、手机号 + 验证码登录</p>
            </div>
            <Switch v-model="emailLogin" />
          </div>
        </div>
      
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent
} from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { Separator } from '@/components/ui/separator'

const passwordLogin = ref(false);
const phoneLogin = ref(true);
const emailLogin = ref(true);

</script>
